<template>
    <div>
		<div>
<publish-header />
        <div class="body">
		<div class="breast">
        <div class="breast-left">
			<dl>
			      <dt>小区所在城市</dt>
			      <dd>
			        <input placeholder="西安" value="">
			      </dd>
			</dl>
			
			<dl>
			      <dt>小区</dt>
			          <input placeholder="请输入小区名" >
			</dl>
			
			<dl>
			      <dt>房屋地址</dt>
					<input placeholder="楼栋号" value="">
					<input placeholder="单元号" value="">
					<input placeholder="门牌号" value="">
			</dl>
			
			<dl>
			    <dt>期望售价</dt>
			        <dd>
			          <input style="float:left" placeholder="请输入您期望卖出的价格">
			          <div class="unit">万元</div>
			        </dd>
			</dl>
			
			    <dl>
			    <dt>称呼</dt>
			      <dd>
			    <input  placeholder="我们应该如何称呼您">
			      </dd>
			    </dl>
				
			    <dl>
			    <dt>手机号码</dt>
			      <dd>
			        <input placeholder="您的联系方式，方便我们及时与您联系">
			      </dd>
			    </dl>
				
			</div>
			<div class="breast-right">
				<ul>
					<li>西安 成交房价<br><h2>15889 元/㎡</h2></li>
				</ul>
				<ul>
					<li>
					<a href="">龙泊湾 - 3室2厅/100.4平米</a><span>签约时间 2022-08-22</span>
					</li><li>
					<a href="">嘉园蓝湖九郡 - 3室1厅/113.61平米</a><span>签约时间 2022-08-22</span>
					</li><li>
					<a href="">凯旋城 - 2室1厅/94.53平米</a><span>签约时间 2022-08-22</span>
					</li>
					</ul>
					<ul>
					<li >
					<router-link to="list" style="color:#aaa ;">查看更多成交明细</router-link>
					</li>
					</ul>
			</div>
			<div class="butn">
            <button >提交委托</button>
			</div>
			</div>
			</div>
		<div class="loin">
		    <div class="line">
				卖房全流程
			</div>
			<div class="box1">
				<div class="box">
					<div class="circle">1</div>
					<h3>发布房源</h3>
					<span>在线上免费发布房源</span>
				</div>
				<div class="box">
					<div class="circle">2</div>
					<h3>核对房源</h3>
					<span>30分钟内链家客服联系</span>
					</div>
				<div class="box">
					<div class="circle">3</div>
					<h3>在线销售</h3>
					<span>在链家APP移动管理销售</span>
					</div>
				<div class="box">
					<div class="circle">4</div>
					<h3>签约出户</h3>
					<span>签约过程链家全程服务</span>
				</div>
				
				</div>
			</div>
			</div>
			<div class="leg">
			<div class="content">
				<p >去链家app提升卖房速度</p>
				<p style="font-size: 22px; margin-bottom:100px;">登录业主中心查看同类房子实时成交动态、主动介绍房子吸引更多买家关注</p>
				<div class="download">
					<div>
					<img src="" alt="">
					<img src="" alt="">
					
					</div>
					<div><img src="../assets/img/erweima.png" style="height: 124px;" alt=""></div>
				</div>
				</div>
	
	</div>
         <publish-footer />
		</div>
		    
    

</template>

<script>
import PublishHeader from '@/components/PublishHeader'
import PublishFooter from '@/components/PublishFooter'
    export default {
        components:{PublishHeader, PublishFooter}
    }
</script>

<style lang="scss" scoped>
.body{
				width: 990px;
				margin: 0 auto;
			}
			
			.breast{
				height: 365.5px;
				margin-top: 55px;
			}
			.breast-left{
				width:570px;
				float:left;
				margin: 0 20px 50px 0;
			}
			
			.breast-left dl{
				height: 64.5px;
				margin: 5px 0;
				border-bottom: 1px solid #eee;
			
			}
			.breast-left dl dt{
				float: left;
				line-height: 58px;
				width:80px
			}
			.unit{
				line-height: 64.5px;
			}
			.breast-left dl input{
				// text-align: center;
				height: 50px;
				width: 250px;
				padding: 14px 0 10px 0; 
				outline: none; 
				border: none;
				margin:2px 0 0 16px;
				
			}
			
			.breast-left dl:nth-child(3) input{
				background-color: #fff;
				width: 126px;
				height: 40px;
				padding: 5px 10px;
				margin-top: 10px;
				background-color:#f5f5f6;
				
			}
			 .butn button{
				    float: left;
				    margin-left: 400px;
				    width: 190px;
				    line-height: 55px;
				    font-size: 18px;
				    color: #fff;
				    text-align: center;
					border: none;
				    border-radius: 2px solid #00ac65 ;
				    background-color: #00ac65;
				    cursor: pointer;
					margin-bottom: 50px;
			}
			.breast-right{
				float: right;
				width: 390px;
			}
			
			.breast-right ul{
				box-sizing: border-box;
				position: relative;
				width: 360px;
				color: #aaa;
				font-size: 12px;
				list-style-type:none ;
				background-color:#f5f5f6;
				padding: 8px 28px 0;
				box-shadow: 10px 10px 20px #e6e6e6; 
			}
			.breast-right ul a{
				text-decoration: none;
			}
			
			.breast-right ul:first-child{
				background-color: #394043;
				height: 100px;
				padding: 22px 33px;
			}
			
			
			.breast-right ul:nth-child(2) li {
				padding-bottom: 20px;
				position: relative;
				border-bottom: 1px solid #e6e6e6;
				height: 85px;
				
				}
			
			.breast-right ul:nth-child(2) li a{
				display: flex;
				color: #333;
				font-weight: bold;
				padding-right: 28px;
				padding-top: 25px;
				margin-bottom: 5px;
			}
			.breast-right ul:nth-child(2) a:hover{
				border-bottom: 1px solid #333;
			}
			
			.breast-right ul:last-child{
				height: 80px;
				text-align: center;
				margin: auto 0;
				}
			.breast-right ul:last-child a{
				line-height: 70px;
					
				}
			.breast-right ul:last-child a:hover {
					border-bottom: 1px solid #aaa;
				}
			.loin{
				width: 990px;
				margin: 0 auto 70px;
				border: none;
			}
			.loin .line{
				margin: 0 auto;
				width: 200px;
				font-size: 16px;
			}
			.loin .line::after{
				    top: 10px;
				    height: 1px;
				    width: 430px;
				    background-color: #eee;
			}
			.loin .line::before{
				    top: 10px;
				    height: 1px;
				    width: 430px;
				    background-color: #eee;
			}
			.loin .box1{
				display: flex;
				justify-content: space-between;
				padding-top: 45px;
				
			}
			.loin .box1 .box{
				float: left;
				width: 200px;
			}
			.loin .box1 .box span{
				font-size: 12px;
				line-height: 20px;
				color: #999;
			}
			.loin .box1 .box .circle{
				width: 48px;
				height: 48px;
				background-color: #d0d1d2;
				border-radius: 50%;
				font-size: 36px;
				color: #fff;
				text-align: center;
				line-height: 48px;
				float: left;
			}
			
			.leg{
				background-image: url(../assets/img/banner.jpg);
				background-repeat: no-repeat;
				background-size: auto 670px;
				background-position: center;
				height: 670px;
				padding-top: 1px;
				overflow: hidden;
			}
			.leg .content{
				width: 990px;
				margin: 0 auto;
				height: 670px;
				
			}
			.leg .content p:first-child{
				font-size: 60px; 
				margin-top:180px;
				color:#394043;
				font-weight: bold;
				
			}
			.leg .content .download{
				
				
			}
			
			.leg .content .download div{
				float: left;
				width: 170px;
				line-height: 45px;
				margin-right: 15px;
				
			}
			.leg .content .download div:first-child img:first-child{
				background-image: url(../assets/img/sprite.png);
				background-position: -170px -238px;
				width: 170px;
				height: 54px;
				
				
			}
			.leg .content .download div:first-child img:nth-child(2){
				background-image: url(../assets/img/sprite.png);
				background-position: 0 -238px;
				width: 170px;
				height: 54px;
			}
</style>